<template>
  <div class="bg-rose-50 py-10">
    <div class="w-4/5 bg-white my-0 mx-auto rounded-xl">
      <h2 class="font-bold text-2xl tracking-widest p-6 text-rose-500">我的评论></h2>
      <div class="flex">
        <div class="ml-28 flex-auto">
          <img class="w-72 h-72" :src="'http://127.0.0.1:8081' + info.productImage">
        </div>
        <div class="w-[700px] h-80 flex-auto ml-6">
          <div class="mt-2 font-bold text-base">{{ info.businessName }}</div>
          <div class="mt-3 font-bold text-3xl">{{ info.productName }}</div>
          <div class="mt-3 text-red text-3xl font-bold">￥{{ info.price }}</div>
          <div class="mt-2 text-lg text-rose-400">{{ info.specName }} * {{ info.amount }}</div>
          <div class="mt-3 text-base text-zinc-300">{{ info.orderId }}</div>
          <div class="mt-2 text-base text-zinc-300">{{ info.consignee }} / {{ info.phone }} / {{ info.address }}</div>
          <div class="mt-2 text-base text-zinc-300">{{ info.createTime }} / {{ info.sendTime }} / {{ info.receiptTime }}
          </div>
        </div>
      </div>
      <div class="w-[1000px] h-72 mx-auto">
        <p class="text-3xl font-bold text-rose-300 tracking-widest">商品评价</p>
        <textarea class="w-[1000px] h-32 border-2 border-solid border-rose-200 rounded-lg text-lg my-3 p-2"
          name="introduction" cols="20" v-model="comm"></textarea>
        <v-btn @click="insertComment" class="hover:bg-rose-100">提交评价</v-btn>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      info: {},
      comm: ''
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.pid = this.$route.query.pid
      axios( {
        url: 'http://127.0.0.1:8081/api/selectOrdersByOrderId',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          id: this.pid
        }
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/login' )
        } else {
          this.info = res.data.data.ordersInfo
        }
      } )
    },
    insertComment() {
      if ( this.comm.length === 0 ) {
        this.$message( '请输入评论内容' )
      } else {
        axios( {
          url: 'http://127.0.0.1:8081/api/insertComment',
          method: 'post',
          params: {
            token: window.localStorage.getItem( "userToken" ),
            userName: this.info.userName,
            productId: this.pid,
            commentContent: this.comm
          }
        } ).then( res => {
          if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
            window.localStorage.removeItem( "userToken" ) // 删除卡片，跳转到登录页面
            this.$router.push( '/login' )
          } else {
            this.$message.success( res.data.$message )
            location.reload()
          }
        } )
      }
    }
  }
}
</script>

<style scoped></style>
